<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手 - VR-IoT</title>
    </style>
        <!-- 国际化支持 -->
        <script src="../../pwa-main/js/i18n.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
            padding: 16px;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        body.dark-theme {
            background-color: #0a0a0a;
            color: #e0e0e0;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .header {
            text-align: center;
            margin-bottom: 24px;
        }
        
        .ai-title {
            font-size: 28px;
            font-weight: bold;
            background: linear-gradient(90deg, #007bff, #00d4ff, #4caf50, #ffc107);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientAnimation 4s ease infinite;
            display: inline-block;
        }
        
        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .ai-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #007bff, #00d4ff, #4caf50, #ffc107);
            background-size: 400% 400%;
            animation: gradientAnimation 3s ease infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 0 30px rgba(0, 123, 255, 0.5);
        }
        
        .ai-avatar::before {
            content: '🤖';
            font-size: 50px;
            z-index: 1;
        }
        
        .ai-avatar::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140%;
            height: 140%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0) 70%);
            animation: pulse 3s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.7;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.3;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.7;
            }
        }
        
        .chat-container {
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            height: 50vh;
            overflow-y: auto;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        body.dark-theme .chat-container {
            background-color: #1e1e1e;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .message {
            margin-bottom: 16px;
            max-width: 80%;
        }
        
        .message.user {
            margin-left: auto;
        }
        
        .message.ai {
            margin-right: auto;
        }
        
        .message-content {
            padding: 12px 16px;
            border-radius: 18px;
            word-wrap: break-word;
        }
        
        .message.user .message-content {
            background-color: #007bff;
            color: white;
        }
        
        .message.ai .message-content {
            background-color: #f1f1f1;
            color: #333;
        }
        
        body.dark-theme .message.ai .message-content {
            background-color: #333;
            color: #e0e0e0;
        }
        
        .input-container {
            display: flex;
            background-color: white;
            border-radius: 25px;
            padding: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        body.dark-theme .input-container {
            background-color: #1e1e1e;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        #messageInput {
            flex: 1;
            border: none;
            outline: none;
            padding: 12px 16px;
            border-radius: 20px;
            background-color: transparent;
            color: inherit;
        }
        
        #sendButton {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s, transform 0.2s;
        }
        
        #sendButton:hover {
            background-color: #0056b3;
        }
        
        #sendButton:active {
            transform: scale(0.95);
        }
        
        .quick-actions {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .quick-action-btn {
            background-color: #f1f1f1;
            border: none;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color 0.3s;
        }
        
        body.dark-theme .quick-action-btn {
            background-color: #333;
        }
        
        .quick-action-btn:hover {
            background-color: #e0e0e0;
        }
        
        body.dark-theme .quick-action-btn:hover {
            background-color: #444;
        }
        
        /* 科技感背景装饰 */
        .tech-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .tech-line {
            position: absolute;
            background: linear-gradient(90deg, rgba(0, 123, 255, 0) 0%, rgba(0, 123, 255, 0.5) 50%, rgba(0, 123, 255, 0) 100%);
            height: 1px;
            animation: techLineMove 10s linear infinite;
        }
        
        @keyframes techLineMove {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
    </style>
</head>
<body data-auto-init-sdk="true">
    <div class="tech-bg">
        <div class="tech-line" style="top: 10%; animation-duration: 15s;"></div>
        <div class="tech-line" style="top: 30%; animation-duration: 20s; animation-delay: 2s;"></div>
        <div class="tech-line" style="top: 50%; animation-duration: 12s; animation-delay: 1s;"></div>
        <div class="tech-line" style="top: 70%; animation-duration: 18s; animation-delay: 3s;"></div>
        <div class="tech-line" style="top: 90%; animation-duration: 14s; animation-delay: 0.5s;"></div>
    </div>
    
    <div class="container">
        <div class="header">
            <div class="ai-avatar"></div>
            <h1 class="ai-title" data-i18n="ai.title">AI 助手</h1>
        </div>
        
        <div class="quick-actions">
            <button class="quick-action-btn" data-i18n="ai.action1">智能家居控制</button>
            <button class="quick-action-btn" data-i18n="ai.action2">设备状态查询</button>
            <button class="quick-action-btn" data-i18n="ai.action3">场景模式设置</button>
            <button class="quick-action-btn" data-i18n="ai.action4">帮助中心</button>
        </div>
        
        <div class="chat-container" id="chatContainer">
            <div class="message ai">
                <div class="message-content" data-i18n="ai.welcome">您好！我是您的AI助手，有什么可以帮助您的吗？</div>
            </div>
        </div>
        
        <div class="input-container">
            <input type="text" id="messageInput" placeholder="请输入您的问题...">
            <button id="sendButton">▶</button>
        </div>
    </div>
    
    <script src="../../pwa-main/js/frame-sdk.js"></script>
    <script>
            document.addEventListener('DOMContentLoaded', () => {
                // 使用全局frameSDK实例（已通过data-auto-init-sdk自动初始化）
                const aiSDK = window.frameSDK;
                
                const chatContainer = document.getElementById('chatContainer');
                const messageInput = document.getElementById('messageInput');
                const sendButton = document.getElementById('sendButton');
                
                // 预加载设置变量
                let preloadSettings = null;
                
                // 监听预加载设置消息
                window.addEventListener('message', (event) => {
                    if (event.data && event.data.type === 'PRELOAD_SETTINGS') {
                        console.log('接收到预加载设置:', event.data.settings);
                        preloadSettings = event.data.settings;
                        
                        // 如果i18n已经加载，立即应用预加载设置
                        if (window.i18n && preloadSettings.language) {
                            window.i18n.setLanguage(preloadSettings.language);
                        }
                    }
                }, { once: true });
                
                // 更新界面元素（标题、占位符等）
                function updateUIElements() {
                    if (window.i18n) {
                        // 设置标题
                        const title = i18n.t('ai.title');
                        // 同时更新frameSDK标题和页面标题
                        aiSDK.updateTitle(title);
                        document.title = title + ' - VR-IoT';
                        
                        // 设置输入框占位符
                        const messageInput = document.getElementById('messageInput');
                        if (messageInput) {
                            messageInput.placeholder = i18n.t('ai.inputPlaceholder') || '请输入您的问题...';
                        }
                        
                        // 更新所有翻译元素
                        i18n.updateAllElements();
                        
                        console.log('ai页面UI元素已更新，标题:', title);
                    }
                }
            
            // 添加消息到聊天界面
            function addMessage(content, isUser) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${isUser ? 'user' : 'ai'}`;
                
                const contentDiv = document.createElement('div');
                contentDiv.className = 'message-content';
                contentDiv.textContent = content;
                
                messageDiv.appendChild(contentDiv);
                chatContainer.appendChild(messageDiv);
                
                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            
            // 发送消息
            function sendMessage() {
                const content = messageInput.value.trim();
                if (content) {
                    addMessage(content, true);
                    messageInput.value = '';
                    
                    // 模拟AI回复
                    setTimeout(() => {
                        const responses = [
                            '好的，我正在处理您的请求...',
                            '这是一个很好的问题！让我为您解答。',
                            '收到，我会立即为您执行这项操作。',
                            '感谢您的询问，我正在查询相关信息。'
                        ];
                        const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                        addMessage(randomResponse, false);
                    }, 1000);
                }
            }
            
            // 绑定发送按钮事件
            sendButton.addEventListener('click', sendMessage);
            
            // 绑定回车键发送
            messageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            
            // 快捷操作按钮
            document.querySelectorAll('.quick-action-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    addMessage(btn.textContent, true);
                    
                    setTimeout(() => {
                        // 使用i18n翻译AI回复
                        const response = window.i18n ? 
                            i18n.t('ai.processing', { action: btn.textContent }) : 
                            `我正在为您处理「${btn.textContent}」相关的操作...`;
                        addMessage(response, false);
                    }, 800);
                });
            });
            
            // 监听设置更新
            aiSDK.on('SETTINGS_UPDATE', function(settings) {
                // 应用主题
                document.body.classList.toggle('dark-theme', settings.theme === 'dark');
                
                // 更新语言和UI元素
                if (window.i18n) {
                    i18n.setLanguage(settings.language);
                    updateUIElements();
                }
            });
            
            // 初始化时，如果有预加载设置且i18n已加载，应用语言设置
            if (window.i18n && preloadSettings && preloadSettings.language) {
                window.i18n.setLanguage(preloadSettings.language);
            }
            
            // 监听语言变更事件
            window.addEventListener('languageChanged', () => {
                console.log('ai页面检测到语言变更事件');
                if (window.i18n) {
                    updateUIElements();
                }
            });
            
            // 监听页面切换时的标题刷新请求
            window.addEventListener('message', (event) => {
                if (event.data && event.data.type === 'REFRESH_TITLE') {
                    console.log('接收到标题刷新请求');
                    updateUIElements();
                }
            });

            
            // 初始化页面
            updateUIElements();
        });
    </script>
</body>
</html>